<template>
  <div class="content-temp">
    <div class="button-box">
      <el-button type="primary" @click="goMode">
        <icon-svg name="iconReturn"></icon-svg>
        <span>返回</span>
      </el-button>
    </div>
    <div v-if="!list.length && !loading" class="no-record">
      <img src="~@/assets/img/no_records.png" alt="" /><br />
      暂无画像模板
    </div>
    <template v-else>
      <ul class="clearfix">
        <li v-for="item in list" :key="item.tmplId" class="temp-item" @click="confirmTmpl(item)">
          <el-row :gutter="20">
            <el-col :span="6" align="center">
              <icon-svg name="iconFacTmpl"></icon-svg>
            </el-col>
            <el-col :span="18">
              <h6>{{ item.tmplNm }}</h6>
              <p>{{ item.tmplCmnt }}</p>
            </el-col>
          </el-row>
          <icon-svg name="iconDelete" @click.native.stop="deleteTemp(item)"></icon-svg>
        </li>
      </ul>
      <el-row align="right">
        <el-col :span="24" align="right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.currentPageNum"
            :page-size="params.pageSize"
            :pager-count="5"
            background
            layout="total, prev, pager, next"
            small
            :total="totalSize"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 20,
        queryParams: {
          tmplType: 2
        },
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagImageTmpl/page'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.params.currentPageNum = val
      this.getList()
    },
    confirmTmpl(item) {
      this.$confirm(`确定使用模板【${item.tmplNm}】?`)
        .then(() => this.$emit('temp', item.tmplJson))
        .catch(() => {})
    },
    deleteTemp(item) {
      this.$confirm(`确定删除模板【${item.tmplNm}】？`)
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.$ajax({
            url: this.$ajax.setUrl(`ast/astTagImageTmpl/${item.tmplId}`),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.getList()
              this.$message.success(data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {})
    },
    goMode() {
      this.$emit('mode', 'mode')
    }
  }
}
</script>

<style lang="scss">
.tag-portrait {
  .content-temp {
    position: relative;
    padding: 40px 20px 20px 20px;
    .button-box {
      position: absolute;
      top: 4px;
      right: 18px;
      .el-button {
        font-size: 15px;
        color: #455fbc;
        background-color: transparent;
        border-color: transparent;
        padding: 10px 4px;
        margin-left: 10px;
        svg {
          font-size: 20px;
          width: 20px;
          height: 20px;
          margin-right: 3px;
          margin-top: -5px;
          vertical-align: middle;
        }
      }
    }
    .temp-item {
      position: relative;
      width: 23%;
      float: left;
      background-color: #fff;
      margin: 1%;
      padding: 20px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 2px 2px 10px #ccc;
      &:hover {
        color: #455fbc;
        box-shadow: 2px 2px 10px #455fbc;
      }
      h6 {
        font-size: 18px;
      }
      p {
        font-size: 14px;
        margin-top: 10px;
      }
      h6,
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .icon-svg__iconFacTmpl {
        width: 40px;
        height: 40px;
      }
      .icon-svg__iconDelete {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
      }
      &:hover {
        .icon-svg__iconDelete {
          display: block;
        }
      }
    }
    .no-record {
      font-size: 16px;
      text-align: center;
      color: #666;
      margin: 250px;
      img {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
